<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 1300px;
            height: 300px;
            position: absolute;
            top: -350px;
            display: none;

        }

        #imgbox {
            width: 100%;
            height: 100%;
            justify-content: space-between;
            display: flex;
        }

        #box .img {
            width: 430px;
            height: 300px;
        }

        #img1 {
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            bottom: -300px;
        }
    </style>
</head>

<body>
    <button id="btn">
        点击换肤
    </button>
    <div id="box">
        <div id="imgbox">
            <img src="./images/1.jpg" alt="" class="img">
            <img src="./images/2.jpg" alt="" class="img">
            <img src="./images/3.jpg" alt="" class="img">
        </div>
    </div>
    <img id="img1">
    <script>
        var btn = document.querySelector('#btn')
        var obox = document.querySelector('#box')
        function move(obj, step) {
            var offsetTop = obj.offsetTop;
            obj.style.top = offsetTop + step + 'px'
            return obj.style.top
        }
        var timer;
        btn.onclick = function () {
            btn.style.display = 'none';
            obox.style.display = 'block'
            var timer = setInterval(function () {
                move(box, 20);
                var a = box.offsetTop
                if (a > 0) {
                    clearInterval(timer)
                }
            }, 50)
        }
        var imgs = document.getElementsByClassName('img');
        var img = document.getElementById('img1')
        var timer1;
        var image_url = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"];
        for (i = 0; i < imgs.length; i++) {

            imgs[i].onclick = function () {
                obox.style.display = 'none';
                for (var j = 0; j < image_url.length; j++) {
                    img.src = image_url[0];
                }
                img.style.display = 'block';
                var timer1 = setInterval(function () {
                    var a1 = img.offsetTop;
                    console.log(a1)
                    move(img, -20);
                    if (a1 <= 0) {
                        clearInterval(timer1);
                    }
                }, 50)
            }
        }
    </script>
</body>

</html>